/*
 * Copyright 2015-2016 Imply Data, Inc.
 * Copyright 2017-2019 Allegro.pl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '../../imports';

.bar-chart {
  .measure-bar-charts {
    overflow-x: hidden;
    overflow-y: auto;
    padding-left: $vis-h-padding;
  }

  .scroller {
    position: relative;
    height: 100%;

    .bottom-shadow {
      opacity: 0;
    }
  }

  .selection-highlight-container {
    position: absolute;

    .selection-highlight {
      @include css-variable(border-color, brand);
      pointer-events: none;
      border-width: 1px;
      border-style: dashed;
    }
  }

  .x-axis {
    stroke: $gray;
    stroke-width: 1px;

    .slanty-labels {
      position: absolute;
      overflow: hidden;
    }

    .slanty-label {
      @include ellipsis;
      position: absolute;
      width: 100px;
      height: 20px;
      transform: rotate(-43deg);
      transform-origin: right top;
      text-align: right;
      cursor: default;
      overflow: hidden;
      font-size: 12px;

      &.categorical {
        top: 3px;
      }

      &.continuous {
        top: 6px;
      }
    }
  }

  .measure-bar-chart {
    &::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-bottom: 1px solid $gray;
      border-right: 1px solid $gray;
    }

    &:first-child::after {
      top: 10px;
    }

    .vis-measure-label {
      position: absolute;
      left: 6px;
      top: 12px;
    }

    .vis-bottom {
      pointer-events: none;
      stroke: $gray;
    }

    g.bars {
      g.bar {
        &.not-selected {
          fill-opacity: 0.5;
        }

        &.hover {
          fill-opacity: 0.9;
        }

        > rect.background {
          @include css-variable(fill, brand);
          pointer-events: none;
        }

        > rect.mouse-event-target {
          fill: $white;
          fill-opacity: 0.001;
        }
      }
    }

    .mask {
      fill: $white;
    }
  }
}
